JavaScript 조건문 & 분기
조건에 따라 다르게 실행하는 제어 흐름
if
else
else if
switch
중첩
CHAPTER 01
if문 — 조건이 참이면 실행
"만약에"라는 뜻이에요. 조건이 true일 때만 코드를 실행해요.
if문 기본 문법
if (조건식) {
// 조건이 true일 때만 실행
}
// 예시
let age = 20;
if (age >= 18) {
console.log("성인입니다");
}
// 조건이 true일 때만 실행
}
// 예시
let age = 20;
if (age >= 18) {
console.log("성인입니다");
}
실제 예시: 시험 합격 판정
let score = 75;
if (score >= 60) {
console.log("합격입니다!");
}
if (score >= 60) {
console.log("합격입니다!");
}
OUTPUT
실행하세요 →
CHAPTER 02
if...else문 — 참이면 A, 거짓이면 B
두 가지 선택지 중 하나를 고르는 분기예요.
if...else 문법
if (조건식) {
// 조건이 true일 때
} else {
// 조건이 false일 때
}
// 조건이 true일 때
} else {
// 조건이 false일 때
}
예시: 성공/실패
let score = 45;
if (score >= 60) {
console.log("합격");
} else {
console.log("불합격");
}
if (score >= 60) {
console.log("합격");
} else {
console.log("불합격");
}
OUTPUT
실행하세요 →
CHAPTER 03
else if — 여러 조건을 체크
3개 이상의 선택지가 필요할 때!
else if 문법
if (조건1) {
// 조건1이 true
} else if (조건2) {
// 조건2가 true
} else if (조건3) {
// 조건3이 true
} else {
// 모두 false
}
// 조건1이 true
} else if (조건2) {
// 조건2가 true
} else if (조건3) {
// 조건3이 true
} else {
// 모두 false
}
예시: 학점 판정 (A, B, C, F)
let score = 85;
let grade;
if (score >= 90) {
grade = "A";
} else if (score >= 80) {
grade = "B";
} else if (score >= 70) {
grade = "C";
} else {
grade = "F";
}
console.log(grade);
let grade;
if (score >= 90) {
grade = "A";
} else if (score >= 80) {
grade = "B";
} else if (score >= 70) {
grade = "C";
} else {
grade = "F";
}
console.log(grade);
OUTPUT
실행하세요 →
중요한 예시: 중복 과락 체크
// 평균 60점 이상이고, 모든 과목이 40점 이상이어야 합격
const html = 90;
const css = 80;
const js = 38;
const avg = (html + css + js) / 3;
let comment;
if (avg >= 60) {
if (html > 40 && css > 40 && js > 40) {
comment = `합격! 평균 ${avg}점`;
} else if (js < 40) {
comment = `불합격! js가 ${js}점`;
}
} else {
comment = `불합격! 평균 ${avg}점`;
}
console.log(comment);
const html = 90;
const css = 80;
const js = 38;
const avg = (html + css + js) / 3;
let comment;
if (avg >= 60) {
if (html > 40 && css > 40 && js > 40) {
comment = `합격! 평균 ${avg}점`;
} else if (js < 40) {
comment = `불합격! js가 ${js}점`;
}
} else {
comment = `불합격! 평균 ${avg}점`;
}
console.log(comment);
OUTPUT
실행하세요 →
CHAPTER 04
switch문 — "어떤 값인가?"를 판단
특정 값이 여러 경우 중 어떤 것인지 빠르게 찾을 때!
switch 문법
switch (값) {
case 값1:
// 값1과 일치할 때
break; // 탈출 (중요!)
case 값2:
// 값2와 일치할 때
break;
default:
// 일치하는 값이 없을 때
}
case 값1:
// 값1과 일치할 때
break; // 탈출 (중요!)
case 값2:
// 값2와 일치할 때
break;
default:
// 일치하는 값이 없을 때
}
예시: 요일 판정
const day = "monday";
let msg;
switch (day) {
case "monday":
msg = "월요일";
break;
case "tuesday":
msg = "화요일";
break;
case "wednesday":
msg = "수요일";
break;
default:
msg = "알 수 없음";
}
console.log(msg);
let msg;
switch (day) {
case "monday":
msg = "월요일";
break;
case "tuesday":
msg = "화요일";
break;
case "wednesday":
msg = "수요일";
break;
default:
msg = "알 수 없음";
}
console.log(msg);
OUTPUT
실행하세요 →
⚠️ break가 중요!
break를 "탈출 문"이라고 생각하면 쉬워요.
break가 없으면 다음 case도 계속 실행돼요. (의도하지 않은 결과!)break를 "탈출 문"이라고 생각하면 쉬워요.
CHAPTER 05
if vs switch — 어떤 걸 쓸까?
상황에 맞게 선택하는 것이 중요!
비교표
COMPARISON
| 상황 | if | switch |
|---|---|---|
| 복잡한 조건 (>, <, &&, ||) |
✅ 좋음 | ❌ 어려움 |
| 특정 값 확인 (apple, monday) |
⏳ 가능 | ✅ 더 깔끔 |
| 많은 선택지 (5개 이상) |
❌ 길어짐 | ✅ 깔끔 |
| true/false 판단 | ✅ 기본 | ❌ 부적합 |
예시 비교
// 예시 1: if가 낫다 (복잡한 조건)
if (age >= 18 && hasLicense) {
console.log("운전 가능");
}
// 예시 2: switch가 낫다 (값 확인)
switch (fruit) {
case "apple": console.log("사과"); break;
case "banana": console.log("바나나"); break;
}
if (age >= 18 && hasLicense) {
console.log("운전 가능");
}
// 예시 2: switch가 낫다 (값 확인)
switch (fruit) {
case "apple": console.log("사과"); break;
case "banana": console.log("바나나"); break;
}
💡 선택 기준:
조건이 복잡하거나 true/false 판단 →
특정 값이 뭔지, 선택지가 많음 →
조건이 복잡하거나 true/false 판단 →
if특정 값이 뭔지, 선택지가 많음 →
switch